@import '../../@shared/styles/custom-theme.scss';

.password-component {
  margin: 20px auto auto 32%;

  ::ng-deep .devui-form-vertical .devui-form-item {
    display: block;
  }

  .title {
    margin-bottom: 4px;
    width: 144px;
    height: 36px;
    font-size: 36px;
    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
    font-weight: Normal;
    text-align: LEFT;
    color: #ffffff;
    line-height: 36px;
  }

  .psdChange {
    ::ng-deep .devui-form-control-container {
      display: flex;
    }

    ::ng-deep .devui-form-item {
      margin-bottom: 0;
    }

    ::ng-deep .devui-form-label {
      padding-bottom: 0;
    }

    ::ng-deep .devui-form-span {
      display: flex;
      margin: 60px 0 24px 0;
      height: 16px;
      font-size: 16px;
      color: #ffffff;
      font-family: Microsoft YaHei, Microsoft YaHei-Normal;
      font-weight: Normal;
      text-align: LEFT;
      line-height: 16px;
    }

    ::ng-deep .devui-form-span::after {
      content: "*";
      display: inline-block;
      margin-left: 10px;
      width: 8px;
      height: 16px;
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei-Normal;
      font-weight: Normal;
      text-align: LEFT;
      color: #ff0000;
      line-height: 16px;
    }

    ::ng-deep .devui-form-span::before {
      content: none;
    }

    .password {
      ::ng-deep .devui-form-control-has-suffix .devui-form-item-suffix {
        bottom: 0;
        left: 700px;
      }
    }

    input {
      padding: 0 0;
      display: flex;
      width: 720px;
      height: 40px;
      border-radius: 0px;
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei-Normal;
      font-weight: Normal;
      text-align: LEFT;
      color: #8e8f97;
      line-height: 20px;
      background: #0b0c11;
      border: none;
      border-bottom: 1px solid #4a4b52;
      outline: none;
    }

    ::ng-deep .devui-form-message {
      margin-top: 16px;
      height: 14px;
      opacity: 0.8;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Normal;
      font-weight: Normal;
      text-align: LEFT;
      color: #ff0000;
      line-height: 14px;
    }

    input::-webkit-input-placeholder {
      color: #4a4b52;
    }

    ::ng-deep .devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,
    [dTextInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,
    [dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus {
      border: none;
      border-bottom: 1px solid #4a4b52;
      outline: none;
    }

    ::ng-deep [dTextInput]:not([disabled]):not(.disabled):not(.devui-disabled).error,
    [dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).error,
    [dTextInput]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error,
    [dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error {
      border: none;
      border-bottom: 1px solid rgba(255, 0, 0, 0.6);
      outline: none;
    }

    button {
      margin: 60px auto 166px auto;
      width: 720px;
      height: 50px;
      background: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 2px;
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei-Normal;
      font-weight: Normal;
      text-align: CENTER;
      color: #000000;
      line-height: 14px;
    }
  }
}
